<template>
  <div class="d-flex flex-nowrap">
    <div
      v-for="(item, index) in breadcrumbs"
      :key="index"
      class="breadcrumb-item font-size-14 font-weight-500 line-height-140 d-flex flex-nowrap"
    >
      <a v-if="index !== breadcrumbs.length - 1" :href="item.to" class="whitespace-nowrap">{{ item.label }}</a>
      <span v-else class="ellipsis-single">{{ item.label }}</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  breadcrumbs: {
    type: Array,
    required: true,
  },
})
</script>

<style scoped>
.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  padding: 0 0.35rem;
}
.ellipsis-single {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.whitespace-nowrap {
  white-space: nowrap;
}
</style>
